<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Checkboxes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="top-bar">
            <div class="profile-wrapper">
                <img
                  class="profile"
                  src="assets/david_mraz_resized.jpg"
                  alt="profile picture"
                />
                <p>@davidm_ai</p>
            </div>
        </div>

        <h1><span class="emph">Checkboxes</span></h1>
        <div class="items">
            <div class="item-wrapper">
                <div>1</div>
                <input type="checkbox" class="ck-1">
            </div>
            <div class="item-wrapper">
                <div>2</div>
                <label class="ck-2">
                    <input type="checkbox">
                    <svg viewBox="0 0 68 68" height="32px" width="32px">
                      <path d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16" pathLength="575.0541381835938" class="path"></path>
                    </svg>
                </label>
            </div>
            <div class="item-wrapper">
                <div>3</div>
                <div class="ck-3">
                    <input id="form-checkbox-1" name="checkbox" type="checkbox">
                    <label for="form-checkbox-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200">
                        <mask fill="white" id="checkbox-mask"><rect height="200" width="200"></rect></mask>
                        <rect mask="url(#checkbox-mask)" stroke-width="30" height="200" width="200"></rect>
                        <path stroke-width="15" d="M52 111.018L76.9867 136L149 64"></path>
                        </svg>
                    </label>
                </div>
            </div>
            <div class="item-wrapper">
                <div>4</div>
                <div class="ck-5">
                    <input class="inp-cbx" id="morning" type="checkbox" />
                    <label class="cbx" for="morning">
                        <span>
                            <svg width="14px" height="14px">
                                <use xlink:href="#check-4"></use>
                            </svg>
                        </span>
                    </label>
                    <svg class="inline-svg">
                        <symbol id="check-4" viewbox="0 0 14 14">
                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                        </symbol>
                    </svg>
                </div>
            </div>
            <div class="item-wrapper">
                <div>5</div>
                <div class="ck-4">
                    <label>
                      <input type="checkbox" />
                      <span class="checkbox"></span>
                    </label>
                </div>
            </div>
            <div class="item-wrapper">
                <div>6</div>
                <div class="ck-6">
                    <span class="checkbox">
                      <input type="checkbox" />
                      <svg>
                        <use xlink:href="#ck-6" class="checkbox"></use>
                      </svg>
                    </span>
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                      <symbol id="ck-6" viewBox="0 0 22 22">
                        <path
                          fill="none"
                          d="M5.5,11.3L9,14.8L20.2,3.3l0,0c-0.5-1-1.5-1.8-2.7-1.8h-13c-1.7,0-3,1.3-3,3v13c0,1.7,1.3,3,3,3h13 c1.7,0,3-1.3,3-3v-13c0-0.4-0.1-0.8-0.3-1.2"
                        />
                      </symbol>
                    </svg>
                </div>
            </div>
        </div>
        <p class="code-comments">
            Code In The Comments 👨‍💻
        </p>
        <p class="bottom-bar">
            <span class="modern-frontend-developer">
                <span class="emph">Modern Frontend Developer</span>: <span class="emph">HTML</span> and <span class="emph">CSS</span> Course
            </span>
            <span class="learning-link">
                <img src="assets/atheros-learning.png" alt="arrow icon" />
                learning.atheros.ai
            </span>
        </p>
        
    </div>

  
</body>

</html>